<template>
  <div class="department -container">
    <div class="app-container">
      <el-card v-loading="showLoading" class="tree-card">
        <!-- ===== 头部 ===== -->
        <!-- 左边-顶部 -->
        <el-row type="flex" justify="space-between" align="middle" style="height:40px">
          <el-col :span="20"> <span>江苏传智播客教育科技股份有限公司</span></el-col>
          <el-col :span="4">
            <!-- 右边-顶部 -->
            <el-row type="flex">
              <el-col :span="12">负责人</el-col>
              <el-col :span="12">
                <!-- 下拉菜单 -->
                <el-dropdown>
                  <span class="el-dropdown-link">
                    操作<i class="el-icon-arrow-down el-icon--right" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>

              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- ===== 左边-主体部-树状结构 ===== -->
        <el-tree :data=" departs" :props=" defaultProps" default-expand-all>
          <template #default="{data}">
            <TreeTools
              :node-data="data"
              :departs="departs"
              @delDepartmentsItem="ShowDepartments"
              @addDepts="addDeptsFn"
              @edit-depts="handleEditDepts"
            />
          </template>
        </el-tree>

      </el-card>

      <!-- 封装添加部门-弹出框  -->
      <AddDept
        ref="addDept"
        :dialog-visible="dialogVisible"
        :node-data="nodeData"
        :dept-list="deptList"
        @closeDialog="closeDialogFn"
        @re-rendered="ShowDepartments"
      />
      <!-- 重新渲染部门列表 直接调用下面渲染部门列表的方法 【ShowDepartments】-->
    </div>
  </div>
</template>

<script>
import TreeTools from './components/TreeTools.vue'
import { reqShowDepartments } from '@/api/departments'
// 封装方法：将列表式数据 ==> 树形结构数据  封装的方法在utils/index.js
import { transListToTree } from '@/utils/index'
import AddDept from './components/AddDept.vue'
export default {
  name: 'Department',
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      departs: [], // 树形结构数据
      deptList: [], // 列表式数据
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      dialogVisible: false,
      showLoading: false,
      nodeData: {} // 存添加的部门
    }
  },
  // ====== 渲染部门列表 ======
  created() {
    this.ShowDepartments()
  },
  methods: {
    // ******************************************************
    // ===== 添加部门 部门列表 =====
    async ShowDepartments() {
      this.showLoading = true
      // 优化：代码延迟，页面处出现短暂空白
      await new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve()
        }, 2000)
      })
      const { data: { depts }} = await reqShowDepartments()
      // depts ==> 后台返回的列表式数据
      console.log(transListToTree(depts, ''))
      this.deptList = depts // 列表式数据
      // 将列表式数据==>树形结构数据  并渲染一级部门
      const treeList = transListToTree(depts, '')
      this.departs = treeList // 树形结构数据
      this.showLoading = false
    },
    //  ===== 添加部门 关闭弹框 子传父 =====
    closeDialogFn() {
      this.dialogVisible = false
    },
    // ===== 添加部门 子传父 ======
    addDeptsFn(nodeData) {
      this.dialogVisible = true // 弹出框显示
      this.nodeData = nodeData // 存储传过来的数据, 这个应该记录下来, 将来添加需要用到
      // 也可以在子组件内发请求，一打开添加弹框就发送 ==>下拉菜单
      // ! 父组件调用子组件的方法：ref、$refs
      // this.$nextTick(() => {
      //   this.$refs.addDept.getUserList()
      // })
      // 方法一：动态设置标题
      this.$nextTick(() => {
        this.$refs.addDept.showTitle = '添加部门'
      })
    },
    // ************************************************************
    // ===== 编辑部门 子传父 :回显 =====
    handleEditDepts(nodeData) {
      this.nodeData = nodeData // 存数据
      this.dialogVisible = true // 弹出框显示
      // 也可以在子组件内发请求，一打开编辑弹框就发送 ==>下拉菜单
      // this.$nextTick(() => {
      //   this.$refs.addDept // 发请求
      // })
      this.$nextTick(() => {
        // 方法一：动态设置标
        this.$refs.addDept.showTitle = '编辑部门'
        this.$refs.addDept.getDepartmentDetial()
      }) // 回显
    }

  }
}
</script>

<style lang='scss' scoped>
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
